<template>
  <div class="ts-cashing">
    <ts-header title="提现" back></ts-header>
    <div class="total-earnings white">
      <label class="label-left">请输入提现金额</label>
      <!--<span class="span-values">{{ money | formatMoney}}元</span>-->
      <input class="span-values" type="number" style="border:none" v-model='money_num '/>
      <!--<ts-cell theme="list" :mode="mode" type="text"  v-model="money_num" tip="请填写真实姓名"></ts-cell>-->
      <!--<input type="text" class="inputVal" v-model="money_num">-->
    </div>
    <div class="total-tips white">
      <p class="te-info">当前账户可提现余额
        <span>{{money}}元</span>
      </p>
    </div>

    <div class="withdraws-cash-list white">
      <div class="wcl-head">
        <label class="wcl-label">请选择提现方式</label>
        <router-link class="wcl-link" to="meansManager">管理</router-link>
      </div>
      <div v-if="this.lists.length>0" class="cell-list">
        <label class="cell-item" v-for="item in lists">
          <div class="cell-left">
            <img v-if="item.types===1" class="means-logo" src="../../assets/imgs/icon/bank_card.png" />
            <img v-if="item.types===3" class="means-logo" src="../../assets/imgs/icon/wechat.png" />
            <img v-if="item.types===2" class="means-logo" src="../../assets/imgs/icon/alipay.png" />
            <span class="means-name">
              {{item.bank}}
              <span class="card" v-if="item.types===1">尾号{{item.card.substring(item.card.length-4)}}</span>
            </span>
          </div>
          <div class="cell-right">
            <input v-model="off" :value="item.types" class="cell-radio-input" type="radio"  />
            <span class="cell-radio-circle"></span>
          </div>
        </label>
      </div>
      <div v-else class="cell-null">
        <img class="cell-null-icon" src="../../assets/imgs/widgets/warning.png" />
        <p class="cell-null-tips">您还没有设置过提现方式,请
          <span class="cell-null-route" @click="$router.push({name:'meansManager'})">
            <img class="cell-add" src="../../assets/imgs/icon/add.png" /> 添加提现方式
          </span>
        </p>
      </div>
    </div>
    <div class="confirm-cash">
      <ts-button type="primary" size="large" @click="withdrawalsApply">确认提现</ts-button>
    </div>
    <transition name="slide-child">
      <router-view class="child-route"></router-view>
    </transition>
  </div>
</template>

<script>
import { GET_BANK_LIST, APPLY_WITHDRAWALS } from '../../assets/js/api'

export default {
  name: 'cashing',
  data() {
    return {
      bank_id: null,
      money: 0,
      money_num: 0,
      lists: [],
      off: null
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      const json = await this.$http.post(GET_BANK_LIST);
      let { money, lists } = json.data;
      this.money = money;
      this.money_num = this.money;
      this.lists = lists;
      this.bank_id = this.lists[0].id
    },
    withdrawalsApply() {
      if (!this.off) {
        this.$modal.alert({ message: '请选择提现方式' });
        return;
      }
      if(this.money_num>this.money ||this.money_num===0){
        this.$modal.alert({ message: '请正确填写金额' });
        return
      }
      this.$modal({
        message: '确认要提交此申请吗？',
        cancel: false
      }).then(async action => {
        let {bank_id} = this.$data;
        let money = this.money_num;
        const json = await this.$http.post(APPLY_WITHDRAWALS, { money, bank_id }, { show: true });
        if (json.result === 1) {
          this.$router.goBack()
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";
@import "../../assets/css/variables";

.white {
  background-color: #ffffff;
}
.inputVal{
  text-align: left;
  direction: ltr;
  padding-right: .15rem;
  font-size: .30rem;
  width: 100%;
  height: 0.8rem;
  border: none;
  font-family: PingFangSC-Regular, Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
.total-earnings {
  display: flex;
  padding: .22rem .23rem;
  font-size: .30rem;
  position: relative;
  @include borderScale('bottom');
  .label-left {
    flex: 1;
  }
  .span-values {
    text-align: right;
    flex: 1;
    color: #FAA12F;
  }
}

.total-tips {
  padding: .18rem 0;
  .te-info {
    text-align: right;
    color: #999999;
    @include sc(.26rem, #999999);
    transform-origin: 0 -1;
    transform: scale(.95);
  }
}

.withdraws-cash-list {
  margin-top: .20rem;
  .wcl-head {
    padding: .30rem .26rem;
    display: flex;
    position: relative;
    @include borderScale('bottom');
    .wcl-label {
      flex: 1;
      font-size: .30rem;
    }
    .wcl-link {
      flex: 1;
      direction: rtl;
      @include sc(.28rem, $themeColor);
    }
  }
  .cell-list {
    .cell-item {
      padding: .20rem .27rem .20rem .18rem;
      position: relative;
      @include borderScale('bottom');
      &:last-child {
        border-bottom: none;
      }
      &:active {
        background-color: #E5E5E5;
      }
      display: flex;
      .cell-left {
        flex: 2;
        @include fja(flex-start);
        .means-logo {
          width: .52rem;
        }
        .means-name {
          @include sc(.26rem, #020202);
          margin-left: .25rem;
          font-weight: bold;
          .card {
            padding-left: .20rem;
          }
        }
      }
      .cell-right {
        flex: 1;
        @include fja(flex-end);
        .cell-radio-input {
          display: block;
          &:checked+.cell-radio-circle {
            background-color: #FAA12F;
            border-color: #FAA12F;
            &:after {
              border-color: #fff;
              transform: rotate(45deg) scale(1);
            }
          }
        }
        .cell-radio-circle {
          display: inline-block;
          background-color: #fff;
          border-radius: 100%;
          border: 1px solid #ccc;
          position: relative;
          @include wh(17px, 17px);
          vertical-align: middle;
          &:after {
            border: 2px solid transparent;
            border-left: 0;
            border-top: 0;
            content: " ";
            top: 3px;
            left: 5px;
            position: absolute;
            @include wh(5px, 8px);
            transform: rotate(45deg) scale(0);
            transition: transform .2s;
          }
        }
      }
    }
  }
  .cell-null {
    text-align: center;
    padding: .84rem 0 1.08rem;
    .cell-null-icon {
      width: .64rem;
    }
    .cell-null-tips {
      margin-top: .20rem;
      @include sc(.26rem, #909090);
      .cell-null-route {
        color: #1D9DFF;
        .cell-add {
          width: .23rem;
          position: relative;
          top: .02rem;
        }
      }
    }
  }
}

.confirm-cash {
  padding: 0 .36rem;
  margin-top: .76rem;
}
</style>
